<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-12-12 19:26:11
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
div.enterprise-certification
  div.content
    EnterpriseCenterTitle(:titleList="titleList")
    div.flex.justify-center.mt6
      div.step
        el-steps(:active="tabActive" align-center @click="onTab")
          el-step(title="账号信息")
          el-step(title="缴费")
    div.flex.justify-center.mt6
      div.form(v-if="tabActive == '1'")
        el-form(
          ref="formRef"
          :model="form"
          :rules="rules"
          label-position="right"
          label-width="160px"
          status-icon)
          el-form-item(label="公司类型：" prop="type")
            el-radio-group(v-model="form.type" class="ml-4" :disabled="isBtn == 2")
              el-radio(:label="1") 线上
              el-radio(:label="2") 线下
            div.tip 如您可以邮寄商品，请选择线上，如您需要用户线下消费，如: 餐饮、住宿类，请选择线下
          el-form-item(label="公司名称：" prop="name")
            el-input(v-model="form.name" placeholder="请输入" maxlength="20" clearable :disabled="isBtn == 2")
          el-form-item(label="营业执照：" prop="license") 
            div.flex.column.align-start
              div.mr-tip 1、请确保营业执照未过期；
              div.mr-tip 2、需提交清晰的营业执照复印件，并加盖公章，含最新年检；
              div.mr-tip 3、照片上不允许有其他水印
              div.flex.column.align-baseline
                el-upload(
                  class="avatar-uploader"
                  action="https://api.ekee.com.cn/api/common/upload",
                  :show-file-list="false"
                  :disabled="isBtn == 2"
                  :on-success="uploadBusinessLicenseSuccess")
                  <img v-if="form.license" :src="form.license" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon">
                    div.flex.column
                      <Plus />
                      div.uploader-text 点击上传
                  </el-icon>
                div.mr-tip 格式：JPG/PNG，大小：小于10MB
          el-form-item(label="营业执照有效期：" prop="expire_date")
            el-date-picker(
              v-model="form.expire_date",
              type="date",
              format="YYYY-MM-DD",
              value-format="YYYY-MM-DD",
              placeholder="选择时间",
              :size="size",
              :disabled="isBtn == 2"
              @change="onTimeChange")
          el-form-item(label="统一社会信用代码：" prop="usci")
            el-input(v-model="form.usci" placeholder="请输入" maxlength="20" clearable :disabled="isBtn == 2")
          el-form-item(label="法人姓名：" prop="representative")
            el-input(v-model="form.representative" placeholder="请输入" maxlength="10" clearable :disabled="isBtn == 2")
          el-form-item(label="注册地址：" prop="address_ids")
            el-cascader(
              ref="areaRef",
              v-model="form.address_ids",
              :options="areaData",
              :props="areaProps",
              expandTrigger="hover",
              @change="handleAreaChange",
              placeholder="请选择省/市/区/街道",
              :disabled="isBtn == 2"
              style="width: 100%")
            el-input.mt4(type="textarea" :rows="3" v-model="form.address" placeholder="请输入" maxlength="30" clearable :disabled="isBtn == 2")
          el-form-item(label="身份证正面：" prop="identity_front")
            div.flex.column.align-baseline
              el-upload(
                class="avatar-uploader"
                action="https://api.ekee.com.cn/api/common/upload",
                :show-file-list="false"
                :disabled="isBtn == 2"
                :on-success="uploadIdCardFrontSuccess")
                <img v-if="form.identity_front" :src="form.identity_front" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                  div.flex.column
                    <Plus />
                    div.uploader-text 点击上传
                </el-icon>
              div.mr-tip 格式：JPG/PNG，大小：小于10MB
          el-form-item(label="身份证反面：" prop="identity_reverse")
            div.flex.column.align-baseline
              el-upload(
                class="avatar-uploader"
                action="https://api.ekee.com.cn/api/common/upload",
                :show-file-list="false"
                :disabled="isBtn == 2"
                :on-success="uploadIdCardEndSuccess")
                <img v-if="form.identity_reverse" :src="form.identity_reverse" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                  div.flex.column
                    <Plus />
                    div.uploader-text 点击上传
                </el-icon>
              div.mr-tip 格式：JPG/PNG，大小：小于10MB
        div.flex.justify-center.pb4(v-if="isBtn == 1")
          el-button.btn(type="primary" size="large" plain @click="onCancel(formRef)") 取消
          el-button.btn(type="primary" size="large" @click="onConfirm(formRef)") 确定
        div.flex.justify-center.pb4(v-if="isBtn == 4")
          el-button.btn(type="primary" size="large" @click="onConfirm(formRef)") 重新上传
      div(v-else)
        div(v-if="isBtn == 1") 
          div.form
            el-form(
              ref="formRef"
              :model="form"
              :rules="rules"
              label-position="right"
              label-width="120px"
              status-icon)
              el-form-item
                div.price-title 
                  span 要入驻平台，您需要缴费
                  span.price.mx1 {{ reviewMoney }} 
                  span 元
              el-form-item(label="支付方式：" prop="payment")
                el-radio-group(v-model="payment")
                  div.flex.column.align-baseline
                    el-radio(:label="1") 微信支付
                    el-radio(:label="2") 支付宝支付
                    el-radio(:label="3") 对公转账
          div.flex.justify-center.pb4
            el-button.btn(type="danger" size="large" @click="onPay(formRef)") 立即支付
        div.pay-fees.flex.justify-center.pb4(v-else) 您已缴费
  //- 支付容器
  div.payform(v-html="payForm")
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import EnterpriseCenterTitle from "./EnterpriseCenterTitle.vue";
import { Upload, Area } from "@/api/common";
import enterpriseCenterApi from "@/api/enterprise-center";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();

const props = defineProps({
  isBtn: {
    type: Number,
    default: 1, // 1待支付、2待审核、4驳回
  },
  payParams: {},
});
const emits = defineEmits(["confirm"]);

const titleList = ref([
  {
    name: "企业认证",
    value: "",
  },
]);
const tabActive = ref(1);

const formRef = ref();
const rules = ref({
  type: [
    {
      required: true,
      message: "请选择公司类型",
      trigger: "change",
    },
  ],
  name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
  license: [
    {
      required: true,
      message: "请上传营业执照",
      trigger: "change",
    },
  ],
  expire_date: [
    {
      required: true,
      message: "请选择营业执照有效期",
      trigger: "change",
    },
  ],
  usci: [
    {
      required: true,
      message: "请输入统一社会信用代码",
      trigger: "blur",
    },
  ],
  representative: [
    {
      required: true,
      message: "请输入法人姓名",
      trigger: "blur",
    },
  ],
  address_ids: [
    {
      required: true,
      message: "请选择注册地址",
      trigger: "change",
    },
  ],
  identity_front: [
    {
      required: true,
      message: "请上传身份证正面",
      trigger: "change",
    },
  ],
  identity_reverse: [
    {
      required: true,
      message: "请上传身份证反面",
      trigger: "change",
    },
  ],
});
const form = ref({
  type: 1,
  name: "",
  license: "",
  expire_date: "",
  usci: "",
  representative: "",
  address_ids: [],
  province: "",
  city: "",
  province: "",
  address: "",
  identity_front: "",
  identity_reverse: "",
});
// 认证费用
const reviewMoney = ref();
// 支付方式
const payment = ref(1);
// 地址
const areaProps = {
  expandTrigger: "hover",
  label: "name",
  value: "id",
  children: "children",
};
// 省市区列表
const areaData = ref([]);
const areaRef = ref();
// 支付表单
const payForm = ref();

onMounted(() => {
  getArea();
  getAuthorInfo();
});

// 获取认证信息回显
const getAuthorInfo = () => {
  enterpriseCenterApi.authorInfo().then((res) => {
    if (res.code) {
      reviewMoney.value = res.data.review_money;
      form.value = res.data;
      form.value.address_ids = res.data.address_ids.split(",").map(Number);
    }
  });
};

// 获取省市区
const getArea = () => {
  Area()
    .then((res) => {
      if (res.code == 1) {
        areaData.value = res.data;
      }
    })
    .catch((err) => {});
};
// 选择省市区
const handleAreaChange = (e, list, code, value) => {
  if (areaRef.value.getCheckedNodes()[0] != undefined) {
    code = areaRef.value.getCheckedNodes()[0].pathLabels; // 注意2： 获取label值
    form.value.province = code[0];
    form.value.city = code[1];
    form.value.county = code[2];
    console.log("from", form.value); // 注意3： 最终结果是个一维数组对象
  } else {
    form.value.province = "";
    form.value.city = "";
    form.value.county = "";
  }
};

// 上传营业执照&&身份证正反面
const uploadBusinessLicenseSuccess = (response, uploadFile) => {
  if (response.code == 0) {
    proxy.$message.error(response.msg);
    return;
  }
  form.value.license = response.data.url;
};
const uploadIdCardFrontSuccess = (response, uploadFile) => {
  if (response.code == 0) {
    proxy.$message.error(response.msg);
    return;
  }
  form.value.identity_front = response.data.url;
};
const uploadIdCardEndSuccess = (response, uploadFile) => {
  if (response.code == 0) {
    proxy.$message.error(response.msg);
    return;
  }
  form.value.identity_reverse = response.data.url;
};

// 营业执照有效期
const onTimeChange = (value) => {
  form.value.expire_date = value;
};

// 确定
const onConfirm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      form.value.address_ids = form.value.address_ids.join(",");
      enterpriseCenterApi
        .authorSubmit({ ...form.value })
        .then((res) => {
          if (res.code == 1) {
            if (props.isBtn == 1) {
              reviewMoney.value = res.data.review_money;
              tabActive.value = 2;
            } else {
              emits("confirm");
            }
          }
        })
        .catch((err) => {
          getAuthorInfo();
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 取消
const onCancel = () => {
  router.push("/enterprise-center");
};
// 立即支付
const onPay = () => {
  if (payment.value == 1 || payment.value == 2) {
    enterpriseCenterApi
      .createPay({
        type: 1,
        method: Number(payment.value),
        order_id: props.payParams.order_id,
        returnurl: proxy.$WEB_URL + "/#/" + props.payParams.return_url,
      })
      .then((res) => {
        console.log("支付页面", res.data);
        if (res.code == 1) {
          payForm.value = res.data;
          // nextTick(() => {
          // document.forms[0].submit(); // 获取第一个支付表单并提交
          // });
        }
      });
  } else {
    router.push({
      path: "/corporate-transfer",
      query: {
        type: 1,
        id: "",
      },
    });
  }
};
// 切换tab
const onTab = () => {
  if (props.isBtn != 1) {
    tabActive.value = tabActive.value == 1 ? 2 : 1;
  }
};
</script>

<style lang="stylus" scoped>
.enterprise-certification
  background: #ffffff;
  .content
    // width: 1200px;
    margin: 0 auto;
    .content
    .step
      width: 460px;
    .form
      width: 600px;
    .tip
      line-height: 20px;
      color: #18BC9F;
      font-size: 12px;
    .mr-tip
      color: rgba(0,0,0,0.38);
    .uploader-text
      font-size: 14px;
    .price-title
      font-size: 24px;
      font-weight: bold;
    .price
      color: #e84026;
    .input-width
      width: 440px;
    .btn
      width: 140px;
    .pay-fees
      font-size: 24px;
      font-weight: bold;
  // 上传图片相关
  .avatar-uploader .el-upload
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  .avatar-uploader .el-upload:hover
    border-color: #dcdfe6;
  .el-icon.avatar-uploader-icon
    font-size: 28px;
    color: #8c939d;
    width: 152px;
    height: 100px;
    text-align: center;
    border: 1px dashed #dcdfe6;
  .avatar-uploader .avatar
    width: 152px;
    height: 100px;
    display: block;
:deep(.el-form-item__label)
  font-weight: bold;
</style>
